<template>
	<view class="page">
		<navHead :datas="headData"></navHead>
		<view class="pd-30 ">
			<view class="head pd-20">
				<view class="ft1">{{ '货币汇率' }}</view>
				<view class="center mt-20 flex">
					<view class="left">
						<view class="list flex-center ft">{{ '货币' }}</view>
						<view class="list flex-center ft">{{ '汇率时间' }}</view>
						<view class="list flex-center ft">{{ '汇率' }}</view>
					</view>
					<view class="right">
						<view class="list flex-center ft c-33">{{ codeInfo.name }}</view>
						<view class="list flex-center ft">{{ codeInfo.time }}</view>
						<view class="list1 flex-center ft">{{ codeInfo.txt }}</view>
					</view>
				</view>
			</view>
			<view class="head  mt-20  pd-20">
				<view class="ft1">{{ '数据来源' }}</view>
				<view class="center mt-20 flex">
					<view class="left">
						<view class="list flex-center ft c-99">{{ '银行机构' }}</view>
						<view class="list flex-center ft c-99">{{ '来源网址' }}</view>
		
					</view>
					<view class="right">
						<view class="list flex-center ft c-33">{{ '中国银行' }}</view>
						<view class="list1 flex-center ft">{{ 'https://www.boc.cn/sourcedb/whpj/' }}</view>
					</view>
				</view>
			</view>
			<view class="head  mt-20  pd-20">
				<view class="ft1">{{ '查看实时数据来源' }}</view>
				<view class="center mt-20 flex">
					<view class="left">
						<view class="list flex-center ft c-99">{{ '银行机构' }}</view>
						<view class="list flex-center ft c-99">{{ '小程序名称' }}</view>
		
					</view>
					<view class="right">
						<view class="list flex-center ft c-33">{{ '中国银行' }}</view>
						<view class="list1 flex-center ft">{{ '结汇购汇' }}</view>
					</view>
				</view>
				<view class="card mt-20 pd-20 ">
					<view class="ft1">{{ '小程序信息展示' }}</view>
					<view class="img mt-20 auto">
						<image class="wh-100" src="https://cdn.oss.bon-top.cn/static_bc/images/img_hui.png"></image>
		
					</view>
					<view class="link mt-20 auto c-ff ft flex-center " @click="goOutLink">{{ "点击跳转(结汇购汇)小程序" }}</view>
				</view>
			</view>
			<view class="back auto">
				<view class="btn flex-center ft c-dbf" @click="goBack">返回</view>
			</view>
		
		</view>
	</view>
</template>

<script setup lang="js">
	import {
		ref,
		reactive
	} from "vue";
	import {
		utils
	} from '@/utils/utils.js';
	import {
		api
	} from '@/utils/api.js';
	import {
		onLoad
	} from '@dcloudio/uni-app'
	
	import navHead from '@/components/navHead.vue';
	const headData = reactive({
		color: '#fff',
		title: '汇率数据来源'
	})
	
	const goBack = () => {
		uni.navigateBack(-1)
	}

	const goOutLink = () => {
		wx.navigateToMiniProgram({
			shortLink: '#小程序://结汇购汇/guQwaUC8xyL8hQt',
			fail(err) {
				console.log(err, ">>>>>>");

			}
		})
	}

	const codeInfo = ref({})
	onLoad((options) => {
		if (options.code) {
			utils
				.request(
					api.getExchangeRateSource, {
						code: options.code
					},
					"post"
				)
				.then((res) => {
					codeInfo.value = res.data
				});
		}
	})
</script>

<style lang="scss" scoped>
	.head {
		width: 690rpx;
		//height: 322rpx;
		background: #F8F8F8;
		border-radius: 40rpx 40rpx 40rpx 40rpx;

		.center {
			width: 650rpx;
			// height: 222rpx;
			background: #FFFFFF;
			border-radius: 20rpx 20rpx 20rpx 20rpx;
			border: 2rpx solid #F1F1F1;

			.left {
				width: 200rpx;
				//height: 222rpx;
				background: #F1F1F1;
				border-radius: 20rpx 0rpx 0rpx 20rpx;

				.list {
					height: 74rpx;
					width: 100%;
				}
			}

			.right {
				flex: 1;

				.list {
					height: 74rpx;
					width: 100%;
					border-bottom: #F1F1F1 solid 2rpx;
				}

				.list1 {
					height: 74rpx;
					width: 100%;

				}
			}
		}

		.card {
			width: 650rpx;
			height: 624rpx;
			background: #FFFFFF;
			border-radius: 40rpx 40rpx 40rpx 40rpx;

			.img {
				width: 530rpx;
				height: 432rpx;
				border-radius: 20rpx;
			}

			.link {
				width: 450rpx;
				height: 78rpx;
				background: #333333;
				border-radius: 20rpx 20rpx 20rpx 20rpx;
			}
		}
	}

	.back {
		width: 100%;
		margin-top: 40rpx;

		.btn {
			width: 690rpx;
			height: 78rpx;
			background: #333333;
			border-radius: 20rpx 20rpx 20rpx 20rpx;
		}
	}
</style>